<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <!--<s:head/>-->
    <title>乐淘首页</title>
    <jsp:include page="component/head.jsp"/>
    <script type="text/javascript">
		function getRequestParameter(name) {
		    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		    var r = decodeURI(window.location.search).substr(1).match(reg);
		    if (r != null) return unescape(r[2]); return null;
	    }
		var gid=getRequestParameter("gid");
		$(document).ready(function () {
			var url = "getgoodsbygoodsid.action?goods.gid="+gid;
			$.getJSON(url,function(goods) {
				document.getElementById("originalPrice").innerHTML=goods.gprice+"RMB"; 
				document.getElementById("realPrice").innerHTML=parseInt(goods.gprice,10)*0.8+"RMB";
				document.getElementById("save").innerHTML="20%";
				var imageurl="getimagelistbygoodsid.action?goods.gid="+gid;	
			 	$.getJSON(imageurl,function(data) {
					$.each(data, function(i, image){
					//alert(image);
					var inner = '<li>'+
								'<img class="etalage_thumb_image" src="${pageContext.request.contextPath}/upload/'+image+'" />'+
								'<img class="etalage_source_image" src="${pageContext.request.contextPath}/upload/'+image+'" />'+
								'</li>';
								
					$("#etalage").append(inner);
				}); 
													$('#etalage').etalage({
										thumb_image_width: 300,
										thumb_image_height: 400,
										source_image_width: 900,
										source_image_height: 1000,
										show_hint: true,
										click_callback: function(image_anchor, instance_id){
											alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
										}
									});
									// This is for the dropdown list example:
									$('.dropdownlist').change(function(){
										etalage_show( $(this).find('option:selected').attr('class') );
									});
			 
			});
			});
			
		});	
		$("#buybutton").click(function () {
       // var datastring="user.ualais="+$("#user\\.ualais").val()+"&"+"user.upassword="+$("#user\\.upassword").val();
            var options = {
                url: 'buygoods.action',
                type: 'post',
                dataType: 'text',
                data:"goods.gid="+""+"&user.uid="+"&goods.gprice=",
                success: function (responsedata) {
                    //if (responsedata.length > 0)
                       // $("#responseText").text(responsedata);
                    $('#myModal').modal('show');
                    if(responsedata=="3"){//登录成功
                    	 function jump(count) { 
                			window.setTimeout(function(){ 
                    			count--; 
                    			if(count > 0) { 
                       				$("#printcontent").html("<p class='bg-success'>登录成功，将在"+count+"秒后进入首页</p>"); 
                        			jump(count); 
                    			} else { 
                        			location.href="p_index.action"; 
                    			} 
                			}, 1000); 
           				 } 
            		jump(3); 
                    }
                    if(responsedata=="4"){
                    	$("#printcontent").html("<p class='bg-danger'>登录失败，用户名或密码错误</p>");
                    }
                }
            };
            $.ajax(options);
            return false;
        });
	</script>
  </head>
  <body>
		<!----container---->
		<jsp:include page="component/navigator.jsp"/>
			<!----content---->
				<div class="content">
				<!----product-details--->
				<div class="product-details">
					<div class="container">
					<div class="product-details-row1">
						<div class="product-details-row1-head">
							<h2 id=category></h2>
							<p id="categoryMoreDetail"></p>
						</div>
						<div class="col-md-4 product-details-row1-col1">
							<!----details-product-slider--->
						<!-- Include the Etalage files -->
							<link rel="stylesheet" href="css/etalage.css">
							<script src="js/jquery.etalage.min.js"></script>
						<!-- Include the Etalage files -->
						
						<script>
						
						$(document).ready(function () {
     var uid = $("#user\\.uid").val();
     var url = "getuserinfo.action?user.uid="+uid;
     $.getJSON(url, function(data) {
        var user=data;
        $("#user\\.ualais").val( (user.ualais==null)?null:user.ualais );
        $("#user\\.uemail").val( (user.uemail==null)?null:user.uemail );
        $("#user\\.uname").val( (user.uname==null)?null:user.uname );
        $("#user\\.utel").val( (user.utel==null)?null:user.utel );
        $("#user\\.uaddress").val( (user.uaddress==null)?null:user.uaddress );
        $("#user\\.uimage").val( (user.uimage==null)?null:user.uimage );
        });
  });
						
						</script>
						<!----//details-product-slider--->
						<div class="details-left">
							<div class="details-left-slider">
								<ul id="etalage">
									<li>
										<img class="etalage_thumb_image" src="${pageContext.request.contextPath}/images/product-slide/image1_thumb.jpg" />
										<img class="etalage_source_image" src="${pageContext.request.contextPath}/images/product-slide/image1_large.jpg" />
									</li>
									
								</ul>
							</div>
						</div>
					</div>
					<div class="col-md-8 product-details-row1-col2">
						<div class="product-rating">
							<a class="rate" href="#"><span> </span></a>
							<label><a href="#">Read <b>8</b> Reviews</a></label>
						</div>
						<div class="product-price">
							<div class="product-price-left text-right">
								<span id="originalPrice"></span>
								<h5 id="realPrice"></h5>
							</div>
							<div class="product-price-right">
								<a href="#"><span> </span></a>
								<label> 节省 <b id="save"></b></label>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="product-price-details">
							<p class="text-right" id="goodsInfo"> </p>
							<a class="shipping" href="#"><span> </span>包邮</a>
							<div class="clearfix"> </div>
							<div class="product-size-qty">
								
								<div class="pro-qty">
									<span>数量:</span>
									<select>
										<option selected="true">1 </option>
										<option>2 </option>
										<option>3 </option>
										<option>4 </option>
										<option>5 </option>
									</select>
								</div> 
								<div class="clearfix"> </div>
							</div>
							<div class="clearfix"> </div>
							<div class="product-cart-share">
								<div class="add-cart-btn">
									<input type="button"  value="Add to cart" />
								</div>
								<ul class="product-share text-right">
									<h3>Share This:</h3>
									<ul>
										<li><a class="share-face" href="#"><span> </span> </a></li>
										<li><a class="share-twitter" href="#"><span> </span> </a></li>
										<li><a class="share-google" href="#"><span> </span> </a></li>
										<li><a class="share-rss" href="#"><span> </span> </a></li>
										<div class="clear"> </div>
									</ul>
								</ul>
							</div>
						</div>
					</div>
						<div class="clearfix"> </div>
				<!--//product-details--->
				</div>
				<!---- product-details ---->
				<div class="product-tabs">
					<!--Horizontal Tab-->
				    <div id="horizontalTab">
				        <ul>
				            <li><a href="#tab-1">Product overwiev</a></li>
				            <li><a href="#tab-2">Features</a></li>
				            <li><a href="#tab-3">Customer reviews</a></li>
				        </ul>
				        <div id="tab-1" class="product-complete-info">
				        	<h3>DESCRIPTION:</h3>
				        	<p>With its beautiful premium leather, lace-up oxford styling, recycled rubber outsoles and 9-inch height, this Earthkeepers City Premium style is an undeniably handsome boot. To complement its rustic, commanding outer appearance, we've paid attention to the inside as well - by adding SmartWool® faux shearling to the linings and crafting the footbed using our exclusive anti-fatigue comfort foam technology to absorb shock. Imported.</p>
				       		<span>DETAILS:</span>
				       		<div class="product-fea">
				       			<p>Premium burnished full-grain leather and suede upper</p>
				       			<p>Leather is from a tannery rated Silver for its water, energy and waste-management practices</p>
				       			<p>Leather lining and footbed for a premium feel and optimal comfort</p>
				       			<p>SmartWool® faux shearling lining is made with 60% merino wool and 40% PET</p>
				       			<p>Reflective insole board for additional warmth under foot</p>
				       			<p>100% organic cotton laces</p>
				       			<p>SmartWool® fabric-lined anti-fatigue footbed provides superior, all-day comfort and climate control</p>
				       			<p>Timberland® exclusive Gripstickℿand Green Rubberℿoutsole is made with 42% recycled rubber</p>
				       		</div>
				        </div>
				        <div id="tab-2" class="product-complete-info">
				        	<h3>DESCRIPTION:</h3>
				        	<p>With its beautiful premium leather, lace-up oxford styling, recycled rubber outsoles and 9-inch height, this Earthkeepers City Premium style is an undeniably handsome boot. To complement its rustic, commanding outer appearance, we've paid attention to the inside as well - by adding SmartWool® faux shearling to the linings and crafting the footbed using our exclusive anti-fatigue comfort foam technology to absorb shock. Imported.</p>
				       		<p>lace-up oxford styling, recycled rubber outsoles and 9-inch height, this Earthkeepers City Premium style is an undeniably handsome boot. To complement its rustic, commanding outer appearance,</p>
				       		<span>DETAILS:</span>
				       		<div class="product-fea">
				       			<p>Premium burnished full-grain leather and suede upper</p>
				       			<p>Leather is from a tannery rated Silver for its water, energy and waste-management practices</p>
				       			<p>Leather lining and footbed for a premium feel and optimal comfort</p>
				       			<p>SmartWool® faux shearling lining is made with 60% merino wool and 40% PET</p>
				       			<p>Reflective insole board for additional warmth under foot</p>
				       		</div>
				        </div>
				        <div id="tab-3"  class="product-complete-info">
				        	<h3>DESCRIPTION:</h3>
				        	<p>With its beautiful premium leather, lace-up oxford styling, recycled rubber outsoles and 9-inch height, this Earthkeepers City Premium style is an undeniably handsome boot. To complement its rustic, commanding outer appearance, we've paid attention to the inside as well - by adding SmartWool® faux shearling to the linings and crafting the footbed using our exclusive anti-fatigue comfort foam technology to absorb shock. Imported.</p>
				       		<span>DETAILS:</span>
				       		<div class="product-fea">
				       			<p>100% organic cotton laces</p>
				       			<p>SmartWool® fabric-lined anti-fatigue footbed provides superior, all-day comfort and climate control</p>
				       			<p>Timberland® exclusive Gripstickℿand Green Rubberℿoutsole is made with 42% recycled rubber</p>
				       			<p>Premium burnished full-grain leather and suede upper</p>
				       			<p>Leather is from a tannery rated Silver for its water, energy and waste-management practices</p>
				       			<p>Leather lining and footbed for a premium feel and optimal comfort</p>
				       			<p>SmartWool® faux shearling lining is made with 60% merino wool and 40% PET</p>
				       			<p>Reflective insole board for additional warmth under foot</p>
				       			<p>100% organic cotton laces</p>
				       			<p>SmartWool® fabric-lined anti-fatigue footbed provides superior, all-day comfort and climate control</p>
				       			<p>Timberland® exclusive Gripstickℿand Green Rubberℿoutsole is made with 42% recycled rubber</p>
				       		</div>
				        </div>
				    </div>
				    <!-- Responsive Tabs JS -->
				    <script src="js/jquery.responsiveTabs.js" type="text/javascript"></script>
				
				    <script type="text/javascript">
				        $(document).ready(function () {
				            $('#horizontalTab').responsiveTabs({
				                rotate: false,
				                startCollapsed: 'accordion',
				                collapsible: 'accordion',
				                setHash: true,
				                disabled: [3,4],
				                activate: function(e, tab) {
				                    $('.info').html('Tab <strong>' + tab.id + '</strong> activated!');
				                }
				            });
				
				            $('#start-rotation').on('click', function() {
				                $('#horizontalTab').responsiveTabs('active');
				            });
				            $('#stop-rotation').on('click', function() {
				                $('#horizontalTab').responsiveTabs('stopRotation');
				            });
				            $('#start-rotation').on('click', function() {
				                $('#horizontalTab').responsiveTabs('active');
				            });
				            $('.select-tab').on('click', function() {
				                $('#horizontalTab').responsiveTabs('activate', $(this).val());
				            });
				
				        });
				    </script>
				</div>
				<!-- //product-details ---->
				</div>
				</div>
			<!----content---->
			<div class="clearfix"> </div>
			<!----footer--->
			<jsp:include page="component/footer.jsp"/>
		</div>
		<!----container---->
	
</body>
</html>
